<template>
  <div>
    <h2>自定义带Hover提示的按钮</h2>
    <!-- 父子组件通信之props -->
    <Child :type="type" :icon="icon" :number="number" @click="handler"/>
    <!-- 对于element-ui里面按钮进行二次封装 -->
    <HintButton type="danger" icon="el-icon-plus" size="mini" titles="危险按钮" @click="handler"></HintButton>       
    <HintButton type="info" icon="el-icon-delete" size="mini" titles="信息按钮" @click="handler"></HintButton>   
  </div>
</template>

<script type="text/ecmascript-6">
import Child from "./Child.vue";
export default {
  name: "AttrsListenersTest",
  data() {
    return {
      type: "success",
      icon: "plus+",
      number: 66,
    };
  },
  components: {
    Child,
  },
  methods: {
    //按钮的点击事件
    handler(){
      alert(123);
    }
  },
};
</script>
